<template>
    <div>
        <!-- <h1>use：</h1>
        <ul v-for="(item , index) in list" :key="index">
            <li>{{item.name}}</li>
        </ul> -->

        <!-- 按钮组 -->
            <el-col :span="12">
                <el-button type="success">新增用户</el-button>
                <el-button type="danger">批量删除</el-button>
            </el-col>
            <el-col :span="12">
                <el-input placeholder="请输入内容" v-model="input" >
                    <el-button slot="append" icon="el-icon-search" ></el-button>
                </el-input>
            </el-col>
        <!-- table -->
        <el-table
            :data="tableDataComputed"
            stripe
            border
            max-height="500"
            style="width: 100%">
            <el-table-column
                fixed
                align="center"
                type="selection"
                label="#"
                width="100%"
            >
            </el-table-column>
            <el-table-column align="center" type="index" label="#" width="100">
            </el-table-column>
            <el-table-column
            prop="name"
            label="姓名"
            width="180">
             <el-table-column
            prop="age"
            label="年龄"
            width="180">
            </el-table-column>
            </el-table-column>
            <el-table-column
            width="180"
            prop="gender"
            label="性别">
            </el-table-column>
            <el-table-column
            width="180"
            prop="specialty"
            label="特长">
            </el-table-column>
            <el-table-column
            width="180"
            prop="idAddress"
            label="地址">
            </el-table-column>
            <el-table-column
            width="180"
            prop="edu"
            label="学历">
            </el-table-column>
            <el-table-column
            width="180"
            prop="weixin"
            label="微信">
            </el-table-column>
            
            <el-table-column
            width="180"
            prop="email"
            label="邮箱">
            </el-table-column>
             <el-table-column
            prop="gongzi"
            label="工资">
            </el-table-column>
            <el-table-column
            width="180"
            prop="zhuceRiqi"
            label="注册日期">
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="250">
                <template slot-scope="scope">
                <el-button type="text" size="small" 
                    >编辑</el-button
                >
                <el-button
                    type="text"
                    size="small"
                    >删除</el-button
                >
                
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
       
    </div>
</template>

<script>
import {mapState} from "vuex"
    export default {
        layout:'main',
        data(){
            return {
                currentPage:1,
                input:"",
                // tableData: []
            }
        },
       
        fetch({store,$axios}){// 填充 vuex state 数据
        console.log($axios);
            store.dispatch("user/getData",$axios);
        }, 
        computed:{
            ...mapState("user",["list"]),
            tableDataComputed(){
                return this.list.map(item=>{
                    return {
                        ...item
                    }
                })
            }
        },
        methods:{
          
        }
    }
</script>

<style scoped>
.el-col{
    padding:10px 0;
}
</style>